<template>
  <div class="BottomBar">
    <!-- 底部 star  -->
    <nav class="tarbar">
      <router-link class="item home"  to="/home">
        <i class="icon icon-homers"></i>
        <p>首页</p>
      </router-link>

      <router-link class="item find"  to="/shop">
        <i class="icon icon-find"></i>
        <p>商城</p>
      </router-link>

      <router-link class="item vip"  to="/collection">
        <i class="icon icon-vip"></i>
        <p>收藏夹</p>
      </router-link>

      <router-link class="item my"  to="/user">
        <i class="icon icon-my"></i>
        <p>我的</p>
      </router-link>

      <!-- 底部 end  -->
    </nav>
  </div>
</template>

<script>
export default {
    data(){
        return {
            tarbar:[
                {
                    before:require('../assets/img/shouye.png'),
                    after:require('../assets/img/jn1.png'),
                    path:"/home",
                    name:"首页"
                },
                {
                    before:require('../assets/img/cF.png'),
                    after:require('../assets/img/sQ.png'),
                    path:"/shop",
                    name:"商城"
                },
                {
                    before:require('../assets/img/shoucang.png'),
                    after:require('../assets/img/CH1.png'),
                    path:"/collection",
                    name:"收藏夹"
                },
                {
                    before:require('../assets/img/my.png'),
                    after:require('../assets/img/U8.png'),
                    path:"/user",
                    name:"我的"
                },
            ],
            num:0,
            goes:'/home',
        }
    },
    // methods:{
    //     changeImg(index){
    //         this.num=index
    //     }

    // },

};
</script>

<style lang="scss" scoped>

.BottomBar {
  height: 52px;
  min-width: 320px;
    max-width: 750px;
    margin: 0 auto;
  .tarbar {
    z-index: 5;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0px;
    background-color: #fff;
    box-shadow: 0 3px 14px 2px rgb(0 0 0 / 12%);
    display: flex;
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
      width: calc(100% / 4);
      height: 52px;
      .icon {
        display: block;
        width: 25px;
        height: 24px;
        // text-align: center;
        // padding-top: 2%;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;

      }
      .icon-homers{
        background-image: url(../assets/img/shouye.png);
      }
      .icon-find{
        background-image: url(../assets/img/cF.png);
      }
      .icon-vip{
        background-image: url(../assets/img/shoucang.png);
      }
      .icon-my{
        background-image: url(../assets/img/my.png);
      }

      &.router-link-active{
        color: rgb(156, 25, 237);
        .icon-homers{
          background-image: url(../assets/img/jn1.png);
        }
      }

      &.router-link-exact-active{
        color: rgb(156, 25, 237);
        .icon-find{
          background-image: url(../assets/img/sQ.png);
        }
        .icon-vip{
          background-image: url(../assets/img/CH1.png);
        }
        .icon-my{
          background-image: url(../assets/img/U8.png);
        }
      }
      p {
        color: #666;
        font-size: 12px;
      }
    }
  }
}
</style>